<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定class属性</title>
    <style>
        .div1 {
            color: #f00
        }

        .div2 {
            border: 1px solid #f00;
        }
    </style>
</head>

<body>
    <!-- 创建dmo根节点，一个页面中需要有一个根节点，这个节点下的内容会被react管理 -->
    <div id="app"></div>
</body>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<!-- 使用react语法（jsx），记得type="text/babel" -->
<script type="text/babel">
    /* 
       {}使用表达式
    */
    const arr = ['div1','div2'];
    const str1 = 'div1';
    const str2 = 'div2';

    let flag = false;


    let myDom = 
        (<div>
            <p class={arr.join(' ')}>我是一段文字</p>
            <p class={str1 + ' ' + str2}>我是一段文字</p>
            <p class={(flag ? 'div1' : '') + ' ' + 'div2'}>我是一段文字</p>
        </div>);

    // React17以前
    // ReactDOM.render(myDom, document.getElementById("app"));

    // React17以后创建根节点
    let root = ReactDOM.createRoot(document.getElementById("app"));

    // 渲染jsx对象
    root.render(myDom);
</script>

</html>